<template>
  <div style="display: flex;margin-top: 20px;">
    <div class="info-head">
    </div>
    <div style="margin-left:20px;margin-right: 10px;padding-left: 10px;line-height: 48px;font-size: 20px;font-weight: lighter">
      {{ info['name'] }}
    </div>
    <div style="margin-left: 60%"></div>
    <div >
      <el-button type="primary" @click="prepare">修改个人信息</el-button>
      <el-button type="danger" @click="changePassword">修改密码</el-button>
    </div>
  </div>
  <el-divider style="width: 90vw"/>
  <div style="display: flex;margin-left: 20px">
    <div style="width: 70%">
      <el-descriptions
          class="margin-top"
          :column="1"
          size="large"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon size="16px">
                <user />
              </el-icon>
              昵称
            </div>
          </template>
          {{ info['name'] }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon size="16px">
                <iphone />
              </el-icon>
              电话号码
            </div>
          </template>
          {{ info['phone'] }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon size="16px">
                <location />
              </el-icon>
              账号
            </div>
          </template>
          <span style="color: green">{{ info['account'] }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon size="16px">
                <location />
              </el-icon>
              身份
            </div>
          </template>
          <el-tag v-show="info['identity'] === '0'" type="primary">学生</el-tag>
          <el-tag v-show="info['identity'] === '1'" type="info">管理员</el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="info['identity'] === '1'">
          <template #label>
            <div class="cell-item">
              <el-icon size="16px">
                <location />
              </el-icon>
              管理员操作
            </div>
          </template>
          <el-button type="primary" plain @click="addBook">录入书籍</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="width: 30%;margin-left: 10px;">
      <el-timeline>
        <el-timeline-item timestamp="" placement="top">
          <el-card>
            <h4>欢迎你!</h4>
            <p>感谢使用本系统!</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
  <el-drawer v-model="drawer" direction="rtl">
    <template #title>
      <h4>修改个人信息</h4>
    </template>
    <template #default>
      <div>
        <el-descriptions
            class="margin-top"
            :column="1"
            size="large"
            border
        >
          <el-descriptions-item v-for="(item, index) in change_info" :key="item">
            <template #label>
              <div class="cell-item">
                <el-icon size="16px">
                  <user />
                </el-icon>
                {{ show_list[index] }}
              </div>
            </template>
            <el-input type="text" v-model="item[1]"/>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancel_change">取消</el-button>
        <el-button type="primary" @click="submit_change">提交修改</el-button>
      </div>
    </template>
  </el-drawer>
  <el-drawer v-model="drawerPassWord" direction="rtl">
    <template #title>
      <h4>修改密码</h4>
    </template>
    <template #default>
      <div>
        <el-descriptions
            class="margin-top"
            :column="1"
            size="large"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon size="16px">
                  <user />
                </el-icon>
                原密码
              </div>
            </template>
            <el-input type="password" v-model="prePassWord"/>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon size="16px">
                  <user />
                </el-icon>
                新密码
              </div>
            </template>
            <el-input type="password" v-model="nowPassWord"/>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon size="16px">
                  <user />
                </el-icon>
                确认新密码
              </div>
            </template>
            <el-input type="password" v-model="nowPassWordConfirm"/>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelPassWord">取消</el-button>
        <el-button type="primary" @click="submitPassWord">提交修改</el-button>
      </div>
    </template>
  </el-drawer>
  <el-drawer v-model="drawerBook" direction="rtl">
    <template #title>
      <h4>添加书籍</h4>
    </template>
    <template #default>
      <div>
        <el-descriptions
            class="margin-top"
            :column="1"
            size="large"
            border
        >
          <el-descriptions-item v-for="item in newBookItemList" :key="item">
            <template #label>
              <div class="cell-item">
                <el-icon size="16px">
                  <user />
                </el-icon>
                {{ item.title }}
              </div>
            </template>
            <el-input :type="item.type" v-model="newBook[item.name]"/>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelAddBook">取消</el-button>
        <el-button type="primary" @click="submitAddBook">提交修改</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
const newBookItemList = [
  {
    title: "ISBN",
    name: "isbn",
    type: "number",
    icon: ""
  },
  {
    title: "书名",
    name: "name",
    type: "text",
    icon: ""
  },
  {
    title: "作者",
    name: "author",
    type: "text",
    icon: ""
  },
  {
    title: "馆藏",
    name: "total",
    type: "number",
    icon: ""
  },
  {
    title: "已借出",
    name: "borrow",
    type: "number",
    icon: ""
  },
  {
    title: "页数",
    name: "page",
    type: "number",
    icon: ""
  },
  {
    title: "价格",
    name: "price",
    type: "text",
    icon: ""
  },
  {
    title: "类型",
    name: "type",
    type: "text",
    icon: ""
  },
  {
    title: "最大借阅时长",
    name: "max",
    type: "number",
    icon: ""
  },
  {
    title: "出版社",
    name: "press",
    type: "text",
    icon: ""
  },
  {
    title: "出版时间",
    name: "time",
    type: "text",
    icon: ""
  },
  {
    title: "豆瓣书评链接",
    name: "url",
    type: "text",
    icon: ""
  },
  {
    title: "简介",
    name: "summary",
    type: "textarea",
    icon: ""
  }
]


</script>

<script>
import { defineComponent } from "vue";
import { post, TIME_SPLIT } from "@/http";
import { ElMessage } from "element-plus";
import router from '@/router'
export default defineComponent({
  name: "ReaderInfo",
  data(){
    return{
      id: '',
      info: {},
      drawer: false,  // 查看个人信息
      drawerPassWord: false,   // 修改密码
      drawerBook: false,  // 录入书籍
      change_info: [],
      show_list: ['昵称', '手机号'],
      prePassWord: "",
      nowPassWordConfirm: "",
      nowPassWord: "",
      newBook: {}
    }
  },
  methods:{
    get_info(){
      const source = window.sessionStorage.getItem("Id")
      if(source == null){
        ElMessage.error("请先登录")
        router.push('/Login')
      }else{
        const begin = source.split(';')[1]
        const now = new Date().getDate()
        if(now - Number(begin) > TIME_SPLIT){
          ElMessage.error("登录信息失效,请重新登录")
          router.push("/Login")
        }else{
          this.id = source.split(';')[0]
          let params = new URLSearchParams()
          params.append("id", this.id)
          post("/api/reader/someReader", params).then(res=>{
            if(res.data.code !== 200){
              ElMessage.error("服务器请求数据错误,请尝试重新登录")
              router.push("/Login")
            }else{
              if(res.data.data === null){
                ElMessage.error("服务器上找不到该用户,请尝试重新登录或注册")
              }else{
                this.info = res.data.data
              }
            }
          })
        }
      }
    },
    cancel_change(){
      this.drawer = false
    },
    submit_change(){
      this.drawer = false
      let tmpInfo = this.info
      this.change_info.forEach(item=>{
        tmpInfo[item[0]] = item[1]
      })
      post("/api/reader/changeReader", tmpInfo).then(res=>{
        if(res.data.code === 200){
          ElMessage.success("修改成功")
          this.info = tmpInfo
        }
        else{
          ElMessage.error("修改失败")
        }
      })
    },
    prepare(){
      this.change_info = []
      this.change_info.push(['name', this.info['name']])
      this.change_info.push(['phone', this.info['phone']])
      this.drawer = true
    },
    changePassword(){
      this.nowPassWord = ""
      this.prePassWord = ""
      this.nowPassWordConfirm = ""
      this.drawerPassWord = true
    },
    cancelPassWord(){
      this.drawerPassWord = false
    },
    submitPassWord(){
      if(this.prePassWord === null || this.prePassWord.length === 0){
        ElMessage.error("请输入原密码")
      }else if(this.nowPassWord === null || this.nowPassWord.length === 0){
        ElMessage.error("请输入新密码")
      }else if(this.nowPassWordConfirm === null || this.nowPassWordConfirm.length === 0){
        ElMessage.error("请输入确认的新密码")
      }else if(this.nowPassWord !== this.nowPassWordConfirm){
        ElMessage.error("两次新密码不一致!请重新输入")
      }else{
        let params = new URLSearchParams()
        params.append("id", this.id)
        params.append("oldPassword", this.prePassWord)
        params.append("newPassword", this.nowPassWord)
        post("/api/reader/changePassword",params).then(res=>{
          if(res.data.code !== 200){
            ElMessage.error(res.data.message)
          }else{
            ElMessage.success(res.data.message)
            this.drawerPassWord = false
          }
        })
      }
    },
    addBook(){
      this.drawerBook = true
    },
    newBookInit(){
      this.newBook = {
        "isbn": "",
        "name": "",
        "author": "",
        "total": 0,
        "borrow": 0,
        "page": 0,
        "price": 0.0,
        "type": "",
        "max": 0,
        "summary": "",
        "press": "",
        "time": "",
        "url": ""
      }
    },
    init(){
      this.newBookInit()
    },
    submitAddBook(){
      if(this.newBook['isbn'] === null || this.newBook['isbn'].length === 0){
        ElMessage.error("ISBN码不能为空")
      }else if(this.newBook['name'] === null || this.newBook['name'].length === 0){
        ElMessage.error("书名不能为空")
      }else if(this.newBook['total'] < 0 || this.newBook['borrow'] < 0){
        ElMessage.error("馆藏和已借出不能为负数")
      }else if(this.newBook['page'] < 0){
        ElMessage.error("页数不能为负数")
      }else if(this.newBook['max'] < 0){
        ElMessage.error("最大借阅时长不能为负数")
      }else{
        post("/api/admin/addBook", this.newBook).then(res=>{
          if(res.data.code !== 200){
            ElMessage.error(res.data.message)
          }else{
            ElMessage.success(res.data.message)
            this.newBookInit()
            this.drawerBook = false
          }
        })
      }
    },
    cancelAddBook(){
      this.drawerBook = false
    }
  },
  created(){
    this.init()
    this.get_info()
  }
})
</script>

<style scoped>
.info-head{
  margin-left: 20px;
  height: 48px;
  width: 48px;
  border-radius: 48px;
  background-image: url("/src/assets/img/head.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>